<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>局域网无线机器人-技术宅物语</title>
        <style>
            body {
                font-family: Arial,Helvetica,sans-serif;
                background: #181818;
                color: #EFEFEF;
                font-size: 14px
            }

            h1 {
                font-size: 14px;
                color: #FFCC33;
            }

            h2 {
                font-size: 14px
            }

            section.main {
                display: flex
            }

            #menu,section.main {
                flex-direction: column
            }

            #menu {
                display: none;
                flex-wrap: nowrap;
                min-width: 340px;
                background: #363636;
                padding: 8px;
                border-radius: 4px;
                margin-top: -10px;
                margin-right: 10px;
            }

            #content {
                display: flex;
                flex-wrap: wrap;
                align-items: stretch
            }

            figure {
                padding: 0px;
                margin: 0;
                -webkit-margin-before: 0;
                margin-block-start: 0;
                -webkit-margin-after: 0;
                margin-block-end: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
                -webkit-margin-end: 0;
                margin-inline-end: 0
            }

            figure img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 4px;
                margin-top: 8px;
            }

            @media (min-width: 800px) and (orientation:landscape) {
                #content {
                    display:flex;
                    flex-wrap: nowrap;
                    align-items: stretch
                }

                figure img {
                    display: block;
                    max-width: 100%;
                    max-height: calc(100vh - 40px);
                    width: auto;
                    height: auto
                }

                figure {
                    padding: 0 0 0 0px;
                    margin: 0;
                    -webkit-margin-before: 0;
                    margin-block-start: 0;
                    -webkit-margin-after: 0;
                    margin-block-end: 0;
                    -webkit-margin-start: 0;
                    margin-inline-start: 0;
                    -webkit-margin-end: 0;
                    margin-inline-end: 0
                }
            }

            section#buttons {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between
            }

            #nav-toggle {
                cursor: pointer;
                display: block
            }

            #nav-toggle-cb {
                outline: 0;
                opacity: 0;
                width: 0;
                height: 0
            }

            #nav-toggle-cb:checked+#menu {
                display: flex
            }

            .input-group {
                display: flex;
                flex-wrap: nowrap;
                line-height: 22px;
                margin: 5px 0
            }

            .input-group>label {
                display: inline-block;
                padding-right: 10px;
                min-width: 47%
            }

            .input-group input,.input-group select {
                flex-grow: 1
            }

            .range-max,.range-min {
                display: inline-block;
                padding: 0 5px
            }

            button {
                display: block;
                margin: 5px;
                padding: 0 12px;
                border: 0;
                line-height: 28px;
                cursor: pointer;
                color: #fff;
                background:blue;
                border-radius: 5px;
                font-size: 16px;
                outline: 0
            }

            button:hover {
                background: #d15921
            }

            button:active {
                background: #e95e1e
            }

            button.disabled {
                cursor: default;
                background:darkgray
            }

            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
                height: 22px;
                background: #363636;
                cursor: pointer;
                margin: 0
            }

            input[type=range]:focus {
                outline: 0
            }

            input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: #EFEFEF;
                border-radius: 0;
                border: 0 solid #EFEFEF
            }

            input[type=range]::-webkit-slider-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer;
                -webkit-appearance: none;
                margin-top: -11.5px
            }

            input[type=range]:focus::-webkit-slider-runnable-track {
                background: #EFEFEF
            }

            input[type=range]::-moz-range-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: #EFEFEF;
                border-radius: 0;
                border: 0 solid #EFEFEF
            }

            input[type=range]::-moz-range-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer
            }

            input[type=range]::-ms-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: 0 0;
                border-color: transparent;
                color: transparent
            }

            input[type=range]::-ms-fill-lower {
                background: #EFEFEF;
                border: 0 solid #EFEFEF;
                border-radius: 0
            }

            input[type=range]::-ms-fill-upper {
                background: #EFEFEF;
                border: 0 solid #EFEFEF;
                border-radius: 0
            }

            input[type=range]::-ms-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer;
                height: 2px
            }

            input[type=range]:focus::-ms-fill-lower {
                background: #EFEFEF
            }

            input[type=range]:focus::-ms-fill-upper {
                background: #363636
            }

            .switch {
                display: block;
                position: relative;
                line-height: 22px;
                font-size: 16px;
                height: 22px
            }

            .switch input {
                outline: 0;
                opacity: 0;
                width: 0;
                height: 0
            }

            .slider {
                width: 50px;
                height: 22px;
                border-radius: 22px;
                cursor: pointer;
                background-color: grey
            }

            .slider,.slider:before {
                display: inline-block;
                transition: .4s
            }

            .slider:before {
                position: relative;
                content: "";
                border-radius: 50%;
                height: 16px;
                width: 16px;
                left: 4px;
                top: 3px;
                background-color: #fff
            }

            input:checked+.slider {
                background-color: #ff3034
            }

            input:checked+.slider:before {
                -webkit-transform: translateX(26px);
                transform: translateX(26px)
            }

            select {
                border: 1px solid #363636;
                font-size: 14px;
                height: 22px;
                outline: 0;
                border-radius: 5px
            }

            .image-container {
                position: relative;
                min-width: 160px
            }

            .close {
                position: absolute;
                right: 5px;
                top: 5px;
                background: #ff3034;
                width: 16px;
                height: 16px;
                border-radius: 100px;
                color: #fff;
                text-align: center;
                line-height: 18px;
                cursor: pointer
            }

            .hidden {
                display: none
            }
        </style>
    </head>
    <body>
        <section class="main">
            <div id="logo">
                <label for="nav-toggle-cb" id="nav-toggle">&#9776;&nbsp;&nbsp;ESP网络摄像头魔改版 【头条/BILIBILI：技术宅物语】</label>
            </div>
            <div id="content">
                <div id="sidebar">
                    <input type="checkbox" id="nav-toggle-cb" checked="checked">
                    <nav id="menu">
                        <h1> 图像设置 </h1>
                        <div class="input-group" id="framesize-group">
                            <label for="framesize">分辨率</label>
                            <select id="framesize" class="default-action">
                                <option value="10">UXGA(1600x1200)</option>
                                <option value="9">SXGA(1280x1024)</option>
                                <option value="8">XGA(1024x768)</option>
                                <option value="7">SVGA(800x600)</option>
                                <option value="6">VGA(640x480)</option>
                                <option value="5" selected="selected">CIF(400x296)</option>
                                <option value="4">QVGA(320x240)</option>
                                <option value="3">HQVGA(240x176)</option>
                                <option value="0">QQVGA(160x120)</option>
                            </select>
                        </div>
                        <div class="input-group" id="quality-group">
                            <label for="quality">压缩率</label>
                            <div class="range-min">10</div>
                            <input type="range" id="quality" min="10" max="63" value="10" class="default-action">
                            <div class="range-max">63</div>
                        </div>
                        <div class="input-group" id="brightness-group">
                            <label for="brightness">亮度</label>
                            <div class="range-min">-2</div>
                            <input type="range" id="brightness" min="-2" max="2" value="0" class="default-action">
                            <div class="range-max">2</div>
                        </div>
                        <div class="input-group" id="contrast-group">
                            <label for="contrast">对比度</label>
                            <div class="range-min">-2</div>
                            <input type="range" id="contrast" min="-2" max="2" value="0" class="default-action">
                            <div class="range-max">2</div>
                        </div>
                        <div class="input-group" id="saturation-group">
                            <label for="saturation">饱和度</label>
                            <div class="range-min">-2</div>
                            <input type="range" id="saturation" min="-2" max="2" value="0" class="default-action">
                            <div class="range-max">2</div>
                        </div>
                        <div class="input-group" id="awb-group">
                            <label for="awb">白平衡</label>
                            <div class="switch">
                                <input id="awb" type="checkbox" class="default-action" checked="checked">
                                <label class="slider" for="awb"></label>
                            </div>
                        </div>
                        <div class="input-group" id="wb_mode-group">
                            <label for="wb_mode">场景</label>
                            <select id="wb_mode" class="default-action">
                                <option value="0" selected="selected">自动</option>
                                <option value="1">晴天</option>
                                <option value="2">阴天</option>
                                <option value="3">办公室</option>
                                <option value="4">家</option>
                            </select>
                        </div>
                        <div class="input-group" id="hmirror-group">
                            <label for="hmirror">水平翻转</label>
                            <div class="switch">
                                <input id="hmirror" type="checkbox" class="default-action">
                                <label class="slider" for="hmirror"></label>
                            </div>
                        </div>
                        <div class="input-group" id="vflip-group">
                            <label for="vflip">垂直翻转</label>
                            <div class="switch">
                                <input id="vflip" type="checkbox" class="default-action">
                                <label class="slider" for="vflip"></label>
                            </div>
                        </div>
                        <h1> 动作控制 </h1>
                        
                        <div class="input-group" id="lamp-group">
                            <label for="lamp">灯光亮度</label>
                            <div class="range-min">0</div>
                            <input type="range" id="lamp" min="0" max="255" value="0" class="default-action">
                            <div class="range-max">255</div>
                        </div>
                        <div class="input-group" id="speed-group">
                            <label for="speed">行驶速度</label>
                            <div class="range-min">0</div>
                            <input type="range" id="speed" min="0" max="255" value="150" class="default-action">
                            <div class="range-max">255</div>
                        </div>
                        <div class="input-group" id="angleX-group">
                            <label for="angleX">舵机角度X</label>
                            <div class="range-min">0</div>
                            <input type="range" id="angleX" min="0" max="180" value="90" class="default-action">
                            <div class="range-max">180</div>
                        </div>
                        <div class="input-group" id="angleY-group">
                            <label for="angleY">舵机角度Y</label>
                            <div class="range-min">0</div>
                            <input type="range" id="angleY" min="0" max="180" value="90" class="default-action">
                            <div class="range-max">180</div>
                        </div>
                        <div class="input-group" id="angleZ-group">
                            <label for="angleZ">舵机角度Z</label>
                            <div class="range-min">0</div>
                            <input type="range" id="angleZ" min="0" max="180" value="90" class="default-action">
                            <div class="range-max">180</div>
                        </div>
                        <div class="input-group" id="chassis-group">
                            <label for="chassis">底盘类型：坦克/汽车</label>
                            <div class="switch">
                                <input id="chassis" type="checkbox" class="default-action">
                                <label class="slider" for="chassis"></label>
                            </div>
                        </div>
                        <section id="buttons">
                            <button id="functionA-button"> 功能A</button>
                            <button id="front-button"> 前进 </button>
                            <button id="functionB-button"> 功能B</button>
                        </section>
                        <section id="buttons">
                            <button id="left-button"> 左转 </button>
                            <button id="stop-button"> 停止 </button>
                            <button id="right-button"> 右转 </button>
                        </section>
                        <section id="buttons">
                            <button id="photograph-button"> 保留 </button>
                            <button id="back-button">后退</button>
                            <button id="connect-button" >连接</button>
                        </section>
                    </nav>
                </div>
                <figure>
                    <div id="stream-container" class="image-container hidden">
                        <div class="close" id="close-stream">×</div>
                        <img id="stream" src="">
                    </div>
                </figure>
            </div>
        </section>
        <script>
            document.addEventListener('DOMContentLoaded', function (event) {
            var baseHost = document.location.origin
            var streamUrl = baseHost + ':81'
            var buttonValue = 0

            const hide = el => {
                el.classList.add('hidden')
            }
            const show = el => {
                el.classList.remove('hidden')
            }

            const disable = el => {
                el.classList.add('disabled')
                el.disabled = true
            }

            const enable = el => {
                el.classList.remove('disabled')
                el.disabled = false
            }

            const updateValue = (el, value, updateRemote) => {
                updateRemote = updateRemote == null ? true : updateRemote
                let initialValue
                if (el.type === 'checkbox') {
                    initialValue = el.checked
                    value = !!value
                    el.checked = value
                } else {
                    initialValue = el.value
                    el.value = value
                }

                if (updateRemote && initialValue !== value) {
                    updateConfig(el);
                } else if(!updateRemote){
                if(el.id === "awb_gain"){
                    value ? show(wb) : hide(wb)
                } 
                }
            }

            function updateConfig (el) {
                let value
                switch (el.type) {
                case 'checkbox':
                    value = el.checked ? 1 : 0
                    break
                case 'range':
                case 'select-one':
                    value = el.value
                    break
                case 'button':
                    value = buttonValue
                case 'submit':
                    value = '1'
                    break
                default:
                    return
                }

                const query = `${baseHost}/control?var=${el.id}&val=${value}`

                fetch(query)
                .then(response => {
                    console.log(`request to ${query} finished, status: ${response.status}`)
                })
            }

            document
                .querySelectorAll('.close')
                .forEach(el => {
                el.onclick = () => {
                    hide(el.parentNode)
                }
                })

            // read initial values
            fetch(`${baseHost}/status`)
                .then(function (response) {
                return response.json()
                })
                .then(function (state) {
                document
                    .querySelectorAll('.default-action')
                    .forEach(el => {
                    updateValue(el, state[el.id], false)
                    })
                })

            const view = document.getElementById('stream')
            const viewContainer = document.getElementById('stream-container')

            const connectButton = document.getElementById('connect-button')
            const functionAButton = document.getElementById('functionA-button')
            const functionBButton = document.getElementById('functionB-button')
            const photographButton = document.getElementById('photograph-button')
            const frontButton = document.getElementById('front-button')
            const backButton = document.getElementById('back-button')
            const leftButton = document.getElementById('left-button')
            const rightButton = document.getElementById('right-button')
            const stopButton = document.getElementById('stop-button')
            
            connectButton.style.background = 'darkgray'
            functionAButton.style.color = 'orange'
            functionBButton.style.color = 'orange'
            photographButton.style.color = 'orange'

            const stopStream = () => {
                window.stop();//停止加载
                connectButton.innerHTML = '连接'
                connectButton.style.background = 'gray'
            }

            const startStream = () => {
                view.src = `${streamUrl}/stream`
                show(viewContainer)
                connectButton.innerHTML = '断开'
                connectButton.style.background = 'red'
            }

            connectButton.onclick = () => {
                const streamEnabled = connectButton.innerHTML === '断开'
                if (streamEnabled) {
                    stopStream()
                } else {
                    startStream()
                }
            }

            stopButton.onclick = () => {
                buttonValue = 0
                updateConfig(stopButton)
            }
            frontButton.onclick = () => {
                buttonValue = 1
                updateConfig(frontButton)
            }
            backButton.onclick = () => {
                buttonValue = 2
                updateConfig(backButton)
            }
            leftButton.onclick = () => {
                buttonValue = 3
                updateConfig(leftButton)
            }
            rightButton.onclick = () => {
                buttonValue = 4
                updateConfig(rightButton)
            }
            
            functionAButton.onclick = () => {
                buttonValue = 5
                updateConfig(functionAButton)
            }
            functionBButton.onclick = () => {
                buttonValue = 6
                updateConfig(functionBButton)
            }

            // Attach default on change action
            document
                .querySelectorAll('.default-action')
                .forEach(el => {
                el.onchange = () => updateConfig(el)
                })

            // Custom actions
            // Gain
            const agc = document.getElementById('agc')
            const agcGain = document.getElementById('agc_gain-group')
            const gainCeiling = document.getElementById('gainceiling-group')
            agc.onchange = () => {
                updateConfig(agc)
                if (agc.checked) {
                show(gainCeiling)
                hide(agcGain)
                } else {
                hide(gainCeiling)
                show(agcGain)
                }
            }

            // Exposure
            const aec = document.getElementById('aec')
            const exposure = document.getElementById('aec_value-group')
            aec.onchange = () => {
                updateConfig(aec)
                aec.checked ? hide(exposure) : show(exposure)
            }

            // AWB
            const awb = document.getElementById('awb_gain')
            const wb = document.getElementById('wb_mode-group')
            awb.onchange = () => {
                updateConfig(awb)
                awb.checked ? show(wb) : hide(wb)
            }

            // Detection and framesize
            const detect = document.getElementById('face_detect')
            const recognize = document.getElementById('face_recognize')
            const framesize = document.getElementById('framesize')

            framesize.onchange = () => {
                updateConfig(framesize)
                if (framesize.value > 5) {
                updateValue(detect, false)
                updateValue(recognize, false)
                }
            }

            detect.onchange = () => {
                if (framesize.value > 5) {
                alert("Please select CIF or lower resolution before enabling this feature!");
                updateValue(detect, false)
                return;
                }
                updateConfig(detect)
                if (!detect.checked) {
                disable(enrollButton)
                updateValue(recognize, false)
                }
            }

            recognize.onchange = () => {
                if (framesize.value > 5) {
                alert("Please select CIF or lower resolution before enabling this feature!");
                updateValue(recognize, false)
                return;
                }
                updateConfig(recognize)
                if (recognize.checked) {
                enable(enrollButton)
                updateValue(detect, true)
                } else {
                disable(enrollButton)
                }
            }
            })

        </script>
    </body>
</html>
